<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8"/>
    <title>碳达人</title>

    <link rel="stylesheet" th:href="@{/libs/bootstrapvalidator/css/bootstrapValidator.min.css}"/>
    <link rel="stylesheet" th:href="@{/libs/fireui/accordion.css}"/>
    <link rel="stylesheet" th:href="@{/libs/fireui/table.css}"/>
    <link rel="stylesheet" th:href="@{/cweb/css/calculator.css}"/>
    <link rel="stylesheet" th:href="@{/cweb/css/customer-20211209.css}"/>
</head>
<body>
<header id="header">
    <div th:replace="home/cfragments/navbar :: cnavbar"></div>
</header>
<span th:if="${CURRENT_CUSTOMER == null}">
    <span id="no_login"></span>
</span>
<div class="main-container">
    <div class="content">
        <form class="form-horizontal" id="pwoerForm">
            <div class="calc_two_main" style="min-height: 1100px;border-left:  1px solid #C7C7C7;">
                <div class="calc_two_content calc_two_main_left"
                     style="min-height: 1138px;border-right: 1px solid #C7C7C7;border-left: 0">
                    <div id="accordionThree" role="tablist" class="fire_accordion_common fire_accordion1">
                        <div class="card" style="height: 674px">
                            <a data-toggle="collapse" class="title" href="#collapseThree" aria-expanded="true">
                                <i class="fa fa-angle-down"></i>E<sub>SF6</sub>：使用六氟化硫设备检修与退役过程中产生的六氟化硫排放量，单位为t
                            </a>
                            <div id="collapseThree" class="collapse in" data-parent="#accordionThree">
                                <div class="card-body" style="line-height:40px">
                                    </br>REC<sub>容量,i</sub>：退役设备i的六氟化硫容量，单位为kg
                                    </br>REC<sub>回收,i</sub>：退役设备i的六氟化硫实际回收量，单位为kg
                                    </br>REP<sub>容量,j</sub>：检修设备j的六氟化硫容量，单位为kg
                                    </br>REP<sub>回收,j</sub>：检修设备j的六氟化硫实际回收量，单位为kg
                                </div>
                            </div>
                        </div>
                        <div class="card">
                            <a data-toggle="collapse" class="title" href="#collapseyl" aria-expanded="true">
                                <i class="fa fa-angle-down"></i>E<sub>网损</sub>：输配电损失引起的二氧化碳排放总量，单位为t
                            </a>
                            <div id="collapseyl" class="collapse in" data-parent="#accordionThree"
                                 style="height: 400px;">
                                <div class="card-body" style="line-height:40px">
                                    </br>EF<sub>电网</sub>：区域电网年平均供电排放因子，单位为t/MWh
                                    </br>EL<sub>售电</sub>：售电量，即终端用户用电量，单位为MWh
                                    </br>EL<sub>上网</sub>：电厂上网电量，单位为MWh
                                    </br>EL<sub>输入</sub>：自外省输入电量，单位为MWh
                                    </br>EL<sub>输出</sub>：向外省输出电量，单位为MWh
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="calc_two_content calc_two_main_right" style="min-height: 1100px;border-left: 0">
                    <div class="calc_top calc_two_main_right_content">
                        <div class="form-group">
                            <div class="col-sm-1">
                            </div>
                            <div class="col-sm-7">
                                <input type="text" class="form-control" name="esf6" readonly id="esf6"
                                       placeholder="使用六氟化硫设备检修与退役过程中产生的六氟化硫排放量">
                            </div>
                        </div>
                    </div>
                    <div class="calc_table calc_two_main_right_content" style="height: 300px">
                        <div class="table_style1 table_style2 table-responsive">
                            <table class="table table-striped" style="text-align: center;">
                                <thead>
                                <tr>
                                    <th style="width: 16%;">
                                        <button type="button" class="btn btn-primary" style="width: 40px;padding: 0"
                                                onclick="addRec()">添加
                                        </button>
                                    </th>
                                    <th style="width: 16%">退役设备</th>
                                    <th style="width: 34%">REC<sub>容量,i</sub></th>
                                    <th style="width: 34%">REC<sub>回收,i</sub></th>
                                </tr>
                                </thead>
                                <tbody id="rec">

                                </tbody>
                            </table>
                        </div>
                    </div>
                    <div class="calc_table calc_two_main_right_content" style="height: 300px">
                        <div class="table_style1 table_style2 table-responsive">
                            <table class="table table-striped">
                                <thead>
                                <tr>
                                    <th style="width: 16%;">
                                        <button type="button" class="btn btn-primary" style="width: 40px;padding: 0"
                                                onclick="addRep()">添加
                                        </button>
                                    </th>
                                    <th style="width: 16%;">检修设备</th>
                                    <th style="width: 34%;">REP<sub>容量,j</sub></th>
                                    <th style="width: 34%;">REP<sub>回收,j</sub></th>
                                </tr>
                                </thead>
                                <tbody id="rep">

                                </tbody>
                            </table>
                        </div>
                    </div>

                    <div class="calc_center calc_two_main_right_content">
                        <div class="calc_top calc_two_main_right_content">
                            <div class="form-group">
                                <div class="col-sm-1">
                                </div>
                                <div class="col-sm-7">
                                    <input type="text" class="form-control" name="networkLoss" readonly id="networkLoss"
                                           placeholder="输配电损失引起的二氧化碳排放总量">
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="efSellingElectricity" class="col-sm-2 control-label">EL<sub>售电</sub></label>
                            <div class="col-sm-4">
                                <input type="text" class="form-control" name="efSellingElectricity" id="efSellingElectricity">
                            </div>
                            <label for="efSurfTheInternet" class="col-sm-2 control-label">EL<sub>上网</sub></label>
                            <div class="col-sm-4">
                                <input type="text" class="form-control" name="efSurfTheInternet" id="efSurfTheInternet">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="efInput" class="col-sm-2 control-label">EL<sub>输入</sub></label>
                            <div class="col-sm-4">
                                <input type="text" class="form-control" name="efInput" id="efInput">
                            </div>
                            <label for="efOut" class="col-sm-2 control-label">EL<sub>输出</sub></label>
                            <div class="col-sm-4">
                                <input type="text" class="form-control" name="efOut" id="efOut">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="efPowerGrid" class="col-sm-2 control-label">EF<sub>电网</sub></label>
                            <div class="col-sm-4">
                                <select class="form-control" name="efPowerGrid" id="efPowerGrid">
                                    <option value="0">请选择</option>
                                    <option value="0.9419">0.9419(华北电网)</option>
                                    <option value="1.0826">1.0826(东北电网)</option>
                                    <option value="0.7921">0.7921(华东电网)</option>
                                    <option value="0.8587">0.8587(华中电网)</option>
                                    <option value="0.8922">0.8922(西北电网)</option>
                                    <option value="0.8042">0.8042(南方电网)</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div style="width: 100%; float: left">
                        <div class="calc_line"></div>
                    </div>
                    <div class="calc_bottom calc_two_main_right_content">
                        <button class="btn btn-info waves-effect waves-light btn-sm" style="float: left"
                                onclick="getPower()"
                                type="button">计算
                        </button>
                        <div id="result"></div>
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>
<div>
    <div th:replace="home/cfragments/float_right :: cfloatright"></div>
</div>
<div class="footer">
    <div th:replace="home/cfragments/footer :: cfooter"></div>
</div>
<script th:src="@{/libs/bootstrap/bootstrap.min.js}"></script>
<script th:src="@{/libs/bootstrapvalidator/js/bootstrapValidator.js}"></script>
<script>

    $(function () {
        $('#tdr').addClass('th-bg');
        if ($('#no_login').length == 1) {
            userLogin();
        }

        $('#pwoerForm').bootstrapValidator({
            message: 'This value is not valid',
            feedbackIcons: {
                valid: 'glyphicon glyphicon-ok',
                invalid: 'glyphicon glyphicon-remove',
                validating: 'glyphicon glyphicon-refresh'
            },
            fields: {
                adElectric: {
                    message: 'EL<sub>售电</sub>验证失败',
                    validators: {
                        notEmpty: {
                            message: '请输入EL<sub>售电</sub>'
                        },
                        regexp: {
                            regexp: /^[0-9]+\.[0-9]{3}$/,
                            message: '只能输入保留三位小数的数字'
                        }
                    }
                },
                efSurfTheInternet: {
                    message: 'EL<sub>上网</sub>验证失败',
                    validators: {
                        notEmpty: {
                            message: '请输入EL<sub>上网</sub>'
                        },
                        regexp: {
                            regexp: /^[0-9]+\.[0-9]{3}$/,
                            message: '只能输入保留三位小数的数字'
                        }
                    }
                },
                efInput: {
                    message: 'EL<sub>输入</sub>验证失败',
                    validators: {
                        notEmpty: {
                            message: '请输入EL<sub>输入</sub>'
                        },
                        regexp: {
                            regexp: /^[0-9]+\.[0-9]{3}$/,
                            message: '只能输入保留三位小数的数字'
                        }
                    }
                },
                efOut: {
                    message: 'EL<sub>输出</sub>验证失败',
                    validators: {
                        notEmpty: {
                            message: '请输入EL<sub>输出</sub>'
                        },
                        regexp: {
                            regexp: /^[0-9]+\.[0-9]{3}$/,
                            message: '只能输入保留三位小数的数字'
                        }
                    }
                },
                adElectric: {
                    message: 'AD<sub>电</sub>验证失败',
                    validators: {
                        notEmpty: {
                            message: '请输入AD<sub>电</sub>'
                        },
                        regexp: {
                            regexp: /^[1-9]\d*$/,
                            message: '只能输入整数'
                        }
                    }
                }
            }
        });
    });


    function addRep() {
        var delTd = '<td></td>';
        var td = '<td></td>';
        var td1 = '<td><input type="text" class="form-control" name="repCapacitys" onkeyup="this.value=this.value.replace(/^(\\-)*(\\d+)\\.(\\d\\d).*$/,\'$1$2.$3\')"></td>';
        var td2 = '<td><input type="text" class="form-control" name="repRecoverys" onkeyup="this.value=this.value.replace(/^(\\-)*(\\d+)\\.(\\d\\d).*$/,\'$1$2.$3\')"></td>';
        $('#rep').append('<tr>' + delTd + '' + td + '' + td1 + '' + td2 + '</tr>');
    }

    function addRec() {
        var delTd = '<td></td>';
        var td = '<td></td>';
        var td1 = '<td><input type="text" class="form-control" name="recCapacitys" onkeyup="this.value=this.value.replace(/^(\\-)*(\\d+)\\.(\\d\\d).*$/,\'$1$2.$3\')"></td>';
        var td2 = '<td><input type="text" class="form-control" name="recRecoverys" onkeyup="this.value=this.value.replace(/^(\\-)*(\\d+)\\.(\\d\\d).*$/,\'$1$2.$3\')"></td>';
        $('#rec').append('<tr>' + delTd + '' + td + '' + td1 + '' + td2 + '</tr>');
    }



    function getPower() {
        var flag = $('#pwoerForm').data('bootstrapValidator').isValid();
        if (flag) {
            Core.postAjax("/blog/powergrid/api/result", $('#pwoerForm').serialize(), function (data) {
                console.info(data)
                $('#result').html(data.data.result)
                $('#esf6').val(data.data.esf6);
                $('#networkLoss').val(data.data.networkLoss);
            });
        }
    }
</script>
</body>
</html>